<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/taglib/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>内容发布文章</title>
		<%@ include file="/WEB-INF/view/taglib/header.jsp" %>
		<%@ include file="/WEB-INF/view/taglib/easyui.jsp" %>
		<%@ include file="/WEB-INF/view/taglib/layer.jsp" %>
		<%@ include file="/WEB-INF/view/taglib/uedit.jsp" %>
		<script src="${pageContext.request.contextPath}/script/plupload/plupload.full.min.js"></script>
		<style type="text/css">
            body{ font-size: 12px;}
            body,p,div{ padding: 0; margin: 0;}
            .wraper{ padding: 30px 0;}
            .btn-wraper{ text-align: center;}
            .btn-wraper input{ margin: 0 10px;}
            #file-list{ width: 300px;}
            #file-list li{ margin-bottom: 10px;position:relative;}
            .file-name{ line-height: 30px;}
            .progress{ height: 4px; font-size: 0; line-height: 4px; background: orange; width: 0;position:relative;}
            .tip1{text-align: center; font-size:14px; padding-top:10px;}
            .tip2{text-align: center; font-size:12px; padding-top:10px; color:#b00}
            .catalogue{ position: fixed; _position:absolute; _width:200px; left: 0; top: 0; border: 1px solid #ccc;padding: 10px; background: #eee}
            .catalogue a{ line-height: 30px; color: #0c0}
            .catalogue li{ padding: 0; margin: 0; list-style: none;}
            .percent{
              font-size:12px;
              color:#aaa;
              position:absolute;
              right:-35px;
              top:30px;
              font-style:normal;
            }
            .wraper p{
                margin-bottom:10px;
            }
            .wraper button{
                padding:5px 15px;
                height:30px;
                outline:none;
                border:none;
            }
        </style>
        <script>
            var path = "${pageContext.request.contextPath}";
        </script>
	</head>
	<body>
	 	<div style="position:absolute;top:10px;left:20px;right:20px;bottom:10px;">
			<form id="dataForm" method="post">
				<div class="fitem">
					<ks:formTag table="CMS_ARTICLE" column="REMARKS"/>
				</div>
				<div class="fitem">
					<ks:formTag table="CMS_ARTICLE" column="TITLE"/>
				</div>
				
				<div class="fitem">
					<ks:formTag table="CMS_ARTICLE" column="SUB_TITLE"/>
				</div>
				<div class="fitem">
					<ks:formTag table="CMS_ARTICLE" column="KEYWORDS"/>
				</div>
				<div class="fitem">
					<label>所属栏目</label>
					<input id="categoryId" name="categoryId" value=""/>
				</div>
				<div class="fitem">
					<label>标签</label>
					<input id="tagId" name="tagId" value=""/>
					<ks:formTag table="CMS_ARTICLE" column="PUBLISH_DATE"/>
				</div>
				<div class="fitem">
					<ks:formTag table="CMS_ARTICLE" column="DESCRIPTION"/>
				</div>
				<div class="fitem">
					<ks:formTag table="CMS_ARTICLE" column="SEQ"/>
					<ks:formTag table="CMS_ARTICLE" column="HITS"/>
					<ks:formTag table="CMS_ARTICLE" column="COPYFROM"/>
				</div>
				<%-- <div class="fitem">
					<ks:formTag table="CMS_ARTICLE" column="CONTENT"/>
				</div> --%>
				<div class="fitem">
					<ks:formTag table="CMS_ARTICLE" column="CUSTOM_CONTENT_VIEW"/>
				</div>
				<div class="fitem">
					<ks:formTag table="CMS_ARTICLE" column="VIEW_CONFIG"/>
				</div>
				<div class="fitem">
					<ks:formTag table="CMS_ARTICLE" column="TYPE"/>
					<ks:formTag table="CMS_ARTICLE" column="POINT"/>
				</div>
				<div class="fitem">
					<ks:formTag table="CMS_ARTICLE" column="MAX_DURATION"/>
					<ks:formTag table="CMS_ARTICLE" column="MIN_DURATION"/>
				</div>
				
				<div class="fitem">
					<%-- <ks:formTag table="CMS_ARTICLE" column="SITE_ID"/> --%>
					<input id="siteId" name="siteId" type="hidden"/>
				</div>
				<input id="poster" type="hidden" name="poster"/>
			</form>
			<div class="fitem">
                <%-- <ks:formTag table="CMS_ARTICLE" column="POSTER"/> --%>
                <label>附件</label>最大10mb，支持jpg,png,pdf,zip,doc,ppt,xls
                <div class="wraper">
                    <p>
                        <button id="browse">选择文件</button>
                        <button id="upload">上传</button>
                        <span id="deleteButton" style="background:red;color:#fff;padding:3px 5px;border-radius:3px;cursor:pointer;display:none;"onclick="deleteFuJian();">删除</span>
                        <ul id="file-list"></ul>
                    </p>
                </div>
                <input id="uploadfileId" value="" type="text" style="display:none;" />
            </div>
			<input id="id" name="id" type="hidden"/>
		</div>
		<script type="text/javascript">
			var loadi,url,index = parent.layer.getFrameIndex(window.name);
			$(document).ready(function(){
				var row = parent.$('#dataList').datagrid('getSelected');
				url = '${ctx}/cms/article/save';
				$('#categoryId').val(parent.$('#sel_categoryId').val());
				$('#siteId').val(parent.$('#sel_siteId').val());
				
				if(row != null) {
					$('#dataForm').form('load', row);
					$("#posterShow").attr("src","${ctx}/"+row.poster);
					url = '${ctx}/cms/article/update';
				}
				//添加上传附件组件渲染及设置回调函数
				mineUpload($("#uploadify"), "${ctx}", "afterMineUpload");
				$('#categoryId').combotree({
					tipPosition: 'top',
					editable: false,
					icons: [{iconCls:'icon-clear',handler: function(e){$(e.data.target).combobox('clear');}}],
					required: true,
					idField: 'id',
					textField: 'name',
					parentField: 'parentId',
					url: '${ctx}/cms/category/list/tree?siteId='+parent.$('#sel_siteId').val(),
					panelHeight: 'auto'
				});

				$('#tagId').combobox({
					tipPosition: 'top',
					icons: [{iconCls:'icon-clear',handler: function(e){$(e.data.target).combobox('clear');}}],
					required: false,
					valueField: 'id',
					textField: 'name',
					multiple: true,
					url: '${ctx}/cms/tagcloud/list/all?siteId='+parent.$('#sel_siteId').val(),
					panelHeight: 'auto'
				});
				//设置html编辑器渲染完成后事件，主要是给组件赋值，赋相应数据列值
				/*
		        content.ready(function() {
			        if(row != null && row.content != null) {
			        	content.setContent(row.content);
			        }
		        });
				*/
				//设置html编辑器事件监听，全屏与退出全屏事件，控制外层弹出框对应全屏与退出全屏
				/*
				content.addListener("fullScreenChanged",function(type,mode){
	                if(mode) {
	                	parent.layer.full(index);
	                } else {
	                	parent.layer.restore(index);
	                }
	            });
				*/
			});
		    
			//实例化一个plupload上传对象
            var uploader = new plupload.Uploader({
                 browse_button : 'browse', //触发文件选择对话框的按钮，为那个元素id
                 url : path + '/sys/uploadfile/upload', //服务器端的上传页面地址
                 flash_swf_url : 'js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
                 silverlight_xap_url : 'js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
                 multi_selection : false,
                 filters: {
                       mime_types: [
                            {title:"Image files",extensions:"jpg,png"},
                            {title:"Zip files",extensions:"zip"},
                            {title:"Office files",extensions:"doc,docx,ppt,pptx,xls,xlsx"},
                            {title:"Pdf files",extensions:"pdf"},
                       ],
                       max_file_size : '10mb', //最大只能上传400kb的文件
                       prevent_duplicates : true //不允许选取重复文件
                 }
            });
            
            //在实例对象上调用init()方法进行初始化
            uploader.init();
        
            //绑定各种事件，并在事件监听函数中做你想做的事
            uploader.bind('FilesAdded',function(uploader,files){
               for(var i=0,len=files.length;i<len;i++){
                   var fileName = files[i].name;
                   var html = '<li id="file-' + files[i].id +'"><p class="file-name">'+fileName + '</p><p class="progress"></p><i class="percent"></i></li>';
                   $('#file-list').html(html);
               }
               if(uploader.files.length > 1){
                   uploader.removeFile(uploader.files[0]);
               }
               //每个事件监听函数都会传入一些很有用的参数，
               //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
            });
            // 上传过程中事件
            uploader.bind('UploadProgress',function(uploader,file){
               //每个事件监听函数都会传入一些很有用的参数，
               //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
               $('.progress').css('width',file.percent+'%');
               $('.percent').html(file.percent+'%');
            });
            // 上传完成事件
            uploader.bind('FileUploaded',function(uploader,file,responseObject){
               var fileInfo=JSON.parse(responseObject.response); 
               var fileName =fileInfo.url +"/"+ fileInfo.realname;//拼接图片在服务器所在路径字符串
               $("#poster").val(fileName);//给隐藏输入框赋值
               $("#uploadfileId").val(fileInfo.id);
               $('#deleteButton').css('display','inline');
            });
            uploader.bind('Error',function(uploader,errObject){
                console.log(errObject.code);
                if(errObject.code == -600){
                    layer.alert("文件过大");
                }else if(errObject.code == -601){
                    layer.alert("文件类型不符");
                }
            });
        
            //最后给"开始上传"按钮注册事件
            document.getElementById('upload').onclick = function(){
               uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
            }
            
            /* 删除附件 */
            function deleteFuJian(){
                var uploadfileId = $("#uploadfileId").val();
                $.ajax({
                    type:"post",
                    url: path + "/sys/uploadfile/delete",
                    data:{"delDataId":uploadfileId},
                    dataType:"json",
                    success:function(data){
                    }
                });
                $('#deleteButton').css('display','none');
                $("#file-list").html("");
                $("#poster").val("");
            }
			
			function submitInfo(){
				$('#dataForm').form('submit',{
					url: url,
					onSubmit: function(param){
						if($(this).form('validate')) {
							loadi = parent.layer.load(2, {shade: layerLoadShade,time: layerLoadMaxTime});
						}
						return $(this).form('validate');
					},
					success: function(data){
						parent.layer.close(loadi);
						cleanErrMsg();
						var data = eval('(' + data + ')');
						if (data.success==TRUE){
							parent.$.article.reloadData();
							parent.layer.msg("操作成功！", {offset: layerMsgOffset,icon: 6,shift: 8,time: layerMsgTime});
							parent.layer.close(index);
						} else {
							renderErrMsg(data.message);
						}
					}
				});
			}
		</script>
	</body>
</html>
